import React, { useMemo, useState } from 'react';
import { Input } from 'antd';
import { SettingOutlined } from '@ant-design/icons'
import { INodeComponent } from './type';
import { NodeParams } from './NodeParams'

export const NodeDifficult: React.FC<INodeComponent> = (props) => {

    const [showParams, setShowParams] = useState(false)

    const data = useMemo(() => {
        return props?.data;
    }, [props?.data]);


    const onOpen = () => {
        if (data?.label === 'params') {
            setShowParams(true)
        }
    }

    const onClose = () => {
        setShowParams(false);
    }

    const onFormChange = (value:any) => {
        if(value && props.onChange){
            props.onChange(value)
        }
    }
    

    return (
        <>
            <Input
                readOnly
                placeholder={`请填写${data.labelName}`}
                value={props?.value ? JSON.stringify(props.value) : ''}
                addonAfter={
                    <SettingOutlined
                        onClick={onOpen}
                    />
                }
            />

            {/* params modal */}
            {
                showParams && (
                    <NodeParams 
                        onClose={onClose}
                        title = {data?.labelName + '设置'}
                        onFormChange = {onFormChange}
                        defaultValue = {props?.value}
                    />
                )
            }
        </>
    )
}